<template>
	<view style="width: 100%;min-width: 100vh;">
		<view class="mask123" v-show="showCity" @click.stop="closeMask()">
			<view class="" style="width: 100%;background: rgb(245, 246, 248);">
				<uni-row class=""
					style="width: calc(100% - 60rpx);margin: 10rpx 30rpx 10rpx 30rpx;background: rgb(245, 246, 248);padding: 50rpx 0rpx;"
					:gutter="10">
					<uni-col :span="8" :offset="0" v-for="(item, index) in cityRange" :index="index" :key="index">
						<view @click.stop="sendCity(item)"
							style="background: white;border-radius: 30rpx;border: 1rpx solid #F6F6F6;text-align: center;margin-top: 40rpx;height: 60rpx;line-height: 60rpx">
							{{item.text}}
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	const app = getApp();
	import Vue from 'vue'
	import {
		getConfigParam1
	} from '@/api/home.js';
	export default {
		props: {
			cityRange: {
				type: Array,
				required: true,
				default: ''
			},
		},
		data() {
			return {
				showCity: false,
			}
		},
		watch: {
			showCity: {
				handler(newValue, oldValue) {
					//console.log('****' + newValue)
					if (newValue == true) {
						this.$emit('changeCityArrow', true);
					} else {
						this.$emit('changeCityArrow', false);
					}
				},
			},
		},
		mounted: function() {
			let that = this;
			//console.log(JSON.stringify(that.cityRange))
		},
		methods: {
			sendCity(item) {
				let that = this;
				that.$emit('refreshCity', {
					'value': item.value,
					'text': item.text
				});
				that.showCity = !that.showCity;
			},
			showPop(e) {
				let that = this;
				console.log(e)
				if (e == 'city') {
					that.showCity = !that.showCity;
				} else {
					that.showCity = false;
				}
			},
			closeMask() {
				this.showCity = false;
			},
		}
	}
</script>

<style scoped lang="scss">
	.mask123 {
		background: transparent;
		width: 100%;
		height: calc(100vh - 280rpx);
		position: fixed;
		top: 280rpx;
		left: 0;
		z-index: 9999;
	}
</style>